<template>
  <div class="detail-box">
    <van-nav-bar
      title="测评"
    />
    <div id="myChart" :style="echartsStyle"></div>
  </div>
</template>

<script>
import { Row, Col, Button, Cell, NavBar } from 'vant';
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [NavBar.name]: NavBar,
  },
  data () {
    return {
      echartsStyle: {
        width: '100%',
        height: '300px'
      },
    }
  },
  mounted() {

    // 基于准备好的dom，初始化echarts实例
    let myChart = this.$echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption({
      xAxis: {
        data: ["A","B","C","D"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10]
      }]
    });
  },
  methods: {
  },
}
</script>

<style scoped>
p {
  margin: 0;
}
[class*=van-hairline]::after {
  border-color: #999;
}
.detail-box {
  background-color: #fff;
  height: 100vh;
  overflow: auto;
}
</style>
